<template>

    <el-card>
        <el-row :gutter="20" class="header">
            <el-button size="large" @click="handleDialogValue" :icon="'Plus'" type="primary">新增</el-button>
        </el-row>

        <el-table border :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">

            <el-table-column prop="id" show-overflow-tooltip label="id" width="140" />
            <el-table-column prop="content" show-overflow-tooltip label="内容" width="500" />
            <el-table-column prop="status" label="状态" width="130">
                <template v-slot="scoped">
                    <el-switch v-model="scoped.row.status" class="ml-2" :active-value="0" :inactive-value="1"
                        @change="changeStatus(scoped.row)" />
                </template>
            </el-table-column>

            <el-table-column prop="createTime" label="创建时间" width="140" />
            <el-table-column fixed="right" label="Operations" min-width="160">
                <template v-slot="scoped">
                    <el-button @click="handleEdit(scoped.row)" size="large" type="primary" :icon="'Edit'" circle />
                    <el-button size="large" type="danger" :icon="'Delete'" circle />
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="ListDto.pageNum" v-model:page-size="ListDto.pageSize"
            :page-sizes="[1, 3, 5, 30]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <Dialog @initMessageList="initMessageList" v-if="dialogVisible" @update:modelValue="changeDialog" :id="id"
        :messageValue="messageValue" :dialogVisible="dialogVisible" :title="title">

    </Dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { messageListAPI, updateMessageAPI } from '@/api/index.js'
import { ElMessage } from 'element-plus'
import Dialog from '@/components/Message/Dialog.vue';

let tableData = ref([])

const ListDto = reactive({
    pageSize: 6,
    pageNum: 1,
    status: '',
})

const messageValue = ref();
let total = ref(0)

const initMessageList = async () => {
    let res = await messageListAPI(ListDto)
    tableData.value = res.rows
    total.value = Number(res.total)
}

const handleSizeChange = (val) => {
    ListDto.pageSize = val
    initMessageList()
}
const handleCurrentChange = (val) => {
    ListDto.pageNum = val
    initMessageList()
}

const dialogVisible = ref(false)

const changeDialog = () => {
    dialogVisible.value = false
}

const changeStatus = async (val) => {

    const res = await updateMessageAPI(val)
    if (res != false) {
        ElMessage.success("更新成功")
    }
}
const title = ref('')
const id = ref(-1)

const handleDialogValue = () => {
    title.value = "添加留言"
    id.value = -1
    messageValue.value = {}
    dialogVisible.value = true
}

const handleEdit = (val) => {
    title.value = "更新数据"
    id.value = val.id
    messageValue.value = val
    dialogVisible.value = true
}


initMessageList()

</script>

<style lang="scss" scoped>
:deep(.el-dialog__header) {
    border-bottom: 1px solid #333 !important;
}

:deep() {
    .el-popper {
        width: 800px !important;
    }
}
</style>